<script setup lang="ts">
import { ref } from "vue";
import { preparePaperByGeneticAPI } from "../../api/paper.ts";
import usePaperStore from "../../store/paperStore.ts";
import { useRouter } from "vue-router";
import useUserStore from "../../store/userStore.ts";
import useSectionStore from "../../store/sectionStore.ts";
import { Chapter } from "../../index";

const paperStore = usePaperStore();
const userStore = useUserStore();
const router = useRouter();

const isLoading = ref<boolean>(false);
const chapterStore = useSectionStore();
const chapters = ref<Chapter[]>([]);
chapterStore.getAllChapter().then(() => {
  chapters.value = chapterStore.allChapter;
});

const formData = ref<{
  title: string;
  xzSum: number;
  pdSum: number;
  tkSum: number;
  proportion: number[];
  difficulty: number | null;
  distinguish: number | null;
}>({
  title: "新试卷",
  xzSum: 0,
  pdSum: 0,
  tkSum: 0,
  proportion: new Array<number>(chapterStore.allChapter.length).fill(0),
  difficulty: 0.6,
  distinguish: 0,
});

const preparePaper = () => {
  isLoading.value = true;
  preparePaperByGeneticAPI({
    title: formData.value.title,
    stuid: userStore.userID as number,
    nums: [formData.value.xzSum, formData.value.pdSum, formData.value.tkSum],
    proportion: [...formData.value.proportion],
    difficulty: formData.value.difficulty,
    distinguish: 1,
  })
    .then((response) => {
      isLoading.value = false;
      if (response.status !== 200) {
        throw new Error("网络错误");
      }
      return response.data;
    })
    .then((result) => {
      isLoading.value = false;
      console.log(123);
      const data = result.data;
      paperStore.setPaper(data);
      router.push({ name: "exam_work" });
    });
};
</script>

<template>
  <div class="p-3 container mx-auto">
    <el-col :span="18" class="mx-auto mt-2" v-loading="isLoading">
      <el-card>
        <div class="text-center text-3xl text-red-600">选择考试的方式</div>
        <el-form label-position="top" :label-width="200">
          <el-form-item label="试卷标题:">
            <el-input type="text" v-model="formData.title" />
          </el-form-item>
          <el-row class="my-5">
            <el-col :span="12">
              <el-form-item label="难易度:">
                <el-select
                  placeholder="请选择难度"
                  v-model="formData.difficulty"
                >
                  <el-option label="简单" :value="0.6"></el-option>
                  <el-option label="中等" :value="1"></el-option>
                  <el-option label="困难" :value="1.3"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
              <el-form-item label="区分度:">
                <el-select
                  placeholder="请选择区分度"
                  v-model="formData.distinguish"
                >
                  <el-option label="弱" :value="0"></el-option>
                  <el-option label="中" :value="2"></el-option>
                  <el-option label="强" :value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
          </el-row>
          <el-row class="my-3">
            <el-col :span="24">
              <el-form-item label="选择题个数:">
                <el-input-number :min="0" v-model="formData.xzSum" />
              </el-form-item>
              <el-form-item label="判断题个数:">
                <el-input-number :min="0" v-model="formData.pdSum" />
              </el-form-item>
              <el-form-item label="简答题个数:">
                <el-input-number :min="0" v-model="formData.tkSum" />
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
              <div v-for="(chapter, index) in chapters" :key="chapter.id">
                <el-form-item :label="`${chapter.title}所占比例`">
                  <el-input-number
                    :min="0"
                    v-model="formData.proportion[index]"
                  ></el-input-number>
                </el-form-item>
              </div>
            </el-col> -->
          </el-row>
          <el-button type="primary" @click="preparePaper">开始考试</el-button>
        </el-form>
      </el-card>
    </el-col>
  </div>
</template>

<style scoped></style>
